<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import Upload from '@/components/upload/index.vue'
import { jumpTypeOptions, jumpUrlOptions, bannerTypeOptions } from '@/hooks/useBannerOptions'
import { JumpType, BannerType } from '@/enum/banner'
import { FormInstance } from '@arco-design/web-vue'
import isEmpty from 'lodash/isEmpty'
import PageList from '@/components/FormItem/PageList.vue'
interface customBanner extends Banner {
  miniappurl?: string
  appId?: string
  weburl?: string
  sort: number
  url: string
  value: string
}
const formRef = ref() as Ref<FormInstance>
const props = defineProps<{
  show: boolean
  id: number | string
}>()
const detail = reactive({
  img: '',
  name: '',
  sort: 0,
} as customBanner)
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query = Object.assign({}, detail)
      const { targetType, weburl, appId, miniappurl, url: url1, value } = detail
      /**处理自定义target */
      switch (targetType) {
        case JumpType.跳转外部链接:
          query.target = JSON.stringify({ type: targetType, weburl })
          break
        case JumpType.跳转小程序:
          query.target = JSON.stringify({
            type: targetType,
            appId,
            miniappurl,
          })
          break
        case JumpType.内部链接:
          query.target = JSON.stringify({ url: url1, value })
          break
      }
      console.log(query)
      post(
        { url: '/server-base/admin/banner/submit', data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          emit('update:show', false)
          emit('confirm')
          done(true)
        },
        () => done(false)
      )
    } else done(false)
  })
}
/**获取banner详情 */
const getBannerInfo = () => {
  get({ url: '/server-base/admin/banner/info', data: { id: props.id } }, ({ data }) => {
    /**处理params */
    const params = (data.target && JSON.parse(data.target as string)) || {}
    console.log(params)

    data.miniappurl = params.miniappurl || ''
    data.appId = params.appId || ''
    data.weburl = params.weburl || ''
    data.url = params.url || ''
    data.value = params.value || ''
    console.log('🚀 ~ get ~ data:', data)
    Object.assign(detail, data)
    console.log(detail)
  })
}
onMounted(() => {
  if (props.id) getBannerInfo()
})

const resetVal = () => {
  detail.value = ''
  detail.appId = ''
  detail.miniappurl = ''
  detail.weburl = ''
}
/** */
// watch(
//   () => [detail.targetType, detail.url],
//   () => resetVal()
// )
</script>
<template>
  <CDrawer v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="500px" :title="props.id ? '编辑' : '新建'" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 16 }">
        <a-form-item field="img" label="封面" :rules="[{ required: true, message: '请上传封面' }]" extra="700*260" :validate-trigger="['input']">
          <div>
            <Upload :list="detail.img" v-model:value="detail.img" :limit="1" :accept="'image/*'" />
          </div>
        </a-form-item>
        <a-form-item label="标题" field="name" :rules="[{ required: true, message: '请输入标题' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.name" placeholder="请输入标题" />
        </a-form-item>

        <a-form-item field="sort" label="排序" :rules="[{ required: true, message: '请输入排序值' }]" :validate-trigger="['change', 'blur']">
          <a-input-number :min="0" v-model="detail.sort" placeholder="请输入排序值" />
        </a-form-item>
        <a-form-item field="type" label="显示页面" :rules="[{ required: true, message: '请选择显示页面' }]" :validate-trigger="['change', 'blur']">
          <a-select v-model="detail.type" :options="bannerTypeOptions" placeholder="请选择" />
        </a-form-item>
        <a-form-item field="targetType" label="导向类型" :rules="[{ required: true, message: '请选择导向类型' }]" :validate-trigger="['change', 'blur']">
          <a-select v-model="detail.targetType" :options="jumpTypeOptions" placeholder="请选择跳转类型" />
        </a-form-item>
        <template v-if="detail.targetType == JumpType.跳转小程序">
          <a-form-item field="appId" label="APPID" :rules="[{ required: true, message: '请输入APPID' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.appId" placeholder="请输入APPID" />
          </a-form-item>
          <a-form-item field="miniappurl" label="小程序页面" :rules="[{ required: true, message: '请输入小程序页面' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.miniappurl" placeholder="请输入小程序页面" />
          </a-form-item>
        </template>
        <template v-else-if="detail.targetType == JumpType.跳转外部链接">
          <a-form-item field="weburl" label="外部链接" :rules="[{ required: true, message: '请输入外部链接' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.weburl" placeholder="请输入外部链接" />
          </a-form-item>
        </template>
        <template v-else-if="detail.targetType == JumpType.内部链接">
          <a-form-item field="url" label="内部链接" :rules="[{ required: true, message: '请输入内部链接' }]" :validate-trigger="['change', 'blur']">
            <PageList v-model:val="detail.url" />
            <!-- <a-select :options="jumpUrlOptions" v-model="detail.url" placeholder="请选择" /> -->
          </a-form-item>
        </template>
        <template v-if="detail.url == jumpUrlOptions[jumpUrlOptions.length - 1].value">
          <a-form-item field="value" label="商品ID" :rules="[{ required: true, message: '请输入商品ID' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.value" placeholder="请输入商品ID" />
          </a-form-item>
        </template>
        <template v-if="detail.url == jumpUrlOptions[jumpUrlOptions.length - 3].value">
          <a-form-item field="value" label="活动ID" :rules="[{ required: true, message: '请输入活动ID' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.value" placeholder="请输入活动ID" />
          </a-form-item>
        </template>
      </a-form>
    </div>
  </CDrawer>
</template>
<style lang="less" scoped></style>
